<template>
  <div>
    <LoanTable
      :cols="clos"
      :tableData="tableData"
      :total="20"
      @requestData="requestData"
    >
      <template slot="operating" slot-scope="scope">
<!--   scope.data:
        {
          index: 点击的行号,
          data: 一行中显示的数据
        }     -->
        <template v-if="scope.data.data.id == 13">
          <span>----</span>
        </template>
        <template v-else>
          <el-button @click="onClick(scope)">test</el-button>
        </template>
      </template>
    </LoanTable>
  </div>
</template>

<script>
import LoanTable from "../../components/basic/TableComponent";

export default {
  name: "Test",
  components: {
    LoanTable
  },
  data() {
    return {
      total: 10,
      //cols    key为需要被渲染数据的属性，val为表头显示的数据
      clos: {
        id: "编号",
        name: "标名",
        userPhone: "借款人手机"
      },
      //tableData 这个数组中的对象就是用来被渲染的数据
      //cols中包含的key(属性)一般在被渲染的数据对象中必须包含
      tableData: [
        {
          id: 12,
          name: "新手100号",
          userPhone: "130000452252"
        },
        {
          id: 13,
          name: "熟手111号",
          userPhone: "13000005254"
        },
        {
          id: 22,
          name: "油条222号",
          userPhone: "13000007528"
        },
        {
          id: 35,
          name: "新手333号",
          userPhone: "130000012782"
        },
        {
          id: 12,
          name: "新手100号",
          userPhone: "130000452252"
        },
        {
          id: 13,
          name: "熟手111号",
          userPhone: "13000005254"
        },
        {
          id: 22,
          name: "油条222号",
          userPhone: "13000007528"
        }
      ]
    }
  },
  methods: {
    onClick(row){
      console.log(row)
      this.$router.push("/loan:id")
    },
    requestData(page, limit) {
      console.log("request", page, limit);
    }
  }
}
</script>

<style scoped>

</style>